<template>
	<view class="container">
		<view class="content">
			<header-view></header-view>
			<view class="mine">
				充值
			</view>
			<view class="nav flex" v-if="step==1">
				<view class="nav_item flex_center" :class="current==1?'active_nav':''" @tap="changeNav(1)">数字货币</view>
				<view class="nav_item flex_center" :class="current==2?'active_nav':''" @tap="changeNav(2)">银行卡</view>
				<view class="nav_bg" :class="current==1?'nav_left':'nav_right'"></view>
			</view>
			<view v-if="current==1">
				<view v-if="step==1">
					<view class="crypto">
						选择网络
					</view>
					<view class="input_box" @tap="openPopup">{{aisle.value}}</view>
					<view class="crypto">
						地址
					</view>
					<view class="qr">
						<image class="qr_code" :src="payImage" />
						<view class="copy">
							<text>{{code}}</text>
							<u-icon style="display: inline-block;" name="order" @tap="copy()"></u-icon>
						</view>
					</view>
					<view class="fixed">
						<view class="done btn flex_between" @tap="step=2">
							<text>下一步</text>
							<uni-icons type="arrow-right" size="24" color="#fff"></uni-icons>
						</view>
					</view>
				</view>
				<view v-if="step==2">
					<view class="skip" @tap="back">
						<uni-icons type="arrow-left" size="25" style="font-weight: bold;"></uni-icons>
					</view>
					<view class="form_item">
						<view class="crypto">
							充值金额
							<text style="font-size: 24rpx;opacity: 0.5;">( > 1000 {{aisle.name}})</text>
						</view>
						<view class="item_box input_box flex_center">
							<input type="number" maxlength="15" v-model="amount" />
							<text>{{aisle.name}}</text>
						</view>
					</view>
					<view class="form_item">
						<view class="crypto">
							充值凭证
						</view>
						<view class="item_box image_box">
							<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
								:maxCount="1" width="266" height="266" uploadIcon="photo">
							</u-upload>
						</view>
					</view>
					<view class="agree flex">
						<view class="icon_box flex_center" :class="agree?'is_agree':''" @tap="agree=!agree">
							<uni-icons custom-prefix="iconfont" type="icon-duigou" color="#fff" size="16"></uni-icons>
						</view>
						<view class="text">
							<text>我已阅读</text><text style="color: #0065ff;margin-left: 10rpx;"
								@tap="pagePath()">存款服务协议</text>
						</view>
					</view>
					<view class="fixed">
						<view class="done btn flex_between" @tap="confirmBtn">
							<text>完成</text>
							<uni-icons custom-prefix="iconfont" type="icon-duigou" color="#fff" size="24"></uni-icons>
						</view>
					</view>
				</view>
			</view>
			<view v-if="current==2">
				<view class="card_tips flex_center">
					银行卡充值请咨询在线客服，获取转账凭证后提交申请
				</view>
			</view>
		</view>
		<u-popup :show="show" @close="close" mode="bottom" :round="20">
			<view class="mask">
				<view class="back flex_center" @tap="close">
					<uni-icons type="closeempty" size="18" color="#3d3d3d"></uni-icons>
				</view>
				<view class="title font_title">选择币网</view>
				<view class="list">
					<view class="item flex" v-for="item in aisleList">
						<view class="logo">
							<image :src="item.image" style="width: 80rpx;height: 80rpx;"></image>
						</view>
						<view class="i_list">
							<view class="i_item flex_between" @tap="changeAisle(item,item.value)">
								<text class="font_title">{{item.value}}</text>
								<uni-icons v-if="aisle.id == item.id" custom-prefix="iconfont" type="icon-duigou"
									color="#0065ff" size="20"></uni-icons>
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import headerView from "@/components/headerView.vue"
	import {
		getRechargeChannelApi,
		rechargeConfirmApi,
		rechargePaymentApi
	} from '@/api/api.js'
	export default {
		components: {
			headerView
		},
		data() {
			return {
				step: 1,
				list: ['密码', '银行'],
				current: 1,
				aisle: {},
				payImage: '../../../static/img/qr_code.png',
				code: "0x4B26e2866ab9b58B1FC6F56e3e696A6aB060aBdF",
				payment_id: '1',
				show: false,
				aisleList: [],
				fileList1: [],
				agree: false,
				amount: ""
			}
		},
		onShow() {
			this.getRechargeChannel()
		},
		methods: {
			changeNav(key) {
				if (key == this.current) return
				this.current = key
			},
			// 获取充值网络
			async getRechargeChannel() {
				try {
					// 从 localStorage 中获取 token
					const token = uni.getStorageSync('token');

					if (!token) {
						// 如果没有找到 token，可能需要进行一些处理，比如跳转到登录页面
						console.error('请先登录');
						return;
					}
					const response = await getRechargeChannelApi({
						token
					});
					if (response.data.code === 1) {
						// 成功获取数据
						this.aisleList = response.data.data;
						this.aisle = response.data.data[0]
					} else {
						// 获取数据失败，你可以在这里处理错误情况
						console.error('获取充值网络失败:', response.data.msg);
					}
				} catch (error) {
					// 异常处理
					console.error('获取充值网络异常:', error);
				}
			},
			// 切换币种网络
			async changeAisle(opt, key) {
				if (this.aisle.id == opt.id) return
				this.aisle = opt
				// this.aisle.code = key
				// console.log(this.aisle)
				if (opt.type === 2) {
					this.handleManualTransfer(opt);
				}
				setTimeout(() => {
					this.close();
				}, 100);
			},
			// 手动转账接口
			async handleManualTransfer(opt) {
				const token = uni.getStorageSync('token');
				const Result = await rechargePaymentApi({
					token,
					id: opt.id
				});
				console.log(Result.data.data.id)
				// 处理手动转账接口返回的结果
				this.code = Result.data.data.payid;
				this.payImage = Result.data.data.payimg;
				this.payment_id = Result.data.data.id;

			},
			// 复制
			copy(key) {
				uni.setClipboardData({
					data: this.code,
					success: () => {
						this.$u.toast("复制成功")
					}
				})
			},
			openPopup() {
				this.show = true
			},
			close() {
				this.show = false
			},
			back() {
				this.step = 1
				this.amount = ""
				this.fileList1 = []
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
				console.log(this.fileList1[0].url.fullurl)
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'http://43.139.121.71:1010/api/common/upload',
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							setTimeout(() => {
								resolve(JSON.parse(res.data).data)
							}, 1000)
						}
					});
				})
			},
			pagePath() {
				uni.navigateTo({
					url: '/pages/user/privacy/privacy?type=2'
				})
			},
			// 充值提交
			confirmBtn() {
				if (this.aisle == '') {
					uni.showToast({
						title: '请选择充值网络',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				if (!this.agree) {
					uni.showToast({
						title: '请先阅读并同意存款服务协议',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				if (this.amount == '') {
					uni.showToast({
						title: '请输入充值金额',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				if (this.fileList1 == '') {
					uni.showToast({
						title: '请上传充值凭证',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				const token = uni.getStorageSync('token'); // 获取token，假设已经在localStorage中存储
				const channel_id = this.aisle.id; // 获取币种网络ID
				const payment_id = this.payment_id; // 假设payment_id是aisle对象的属性
				const pay_image = this.fileList1[0].url.fullurl; // 根据实际情况获取支付图片的值
				const money = this.amount; // 获取充值金额

				// 调用rechargeConfirmApi接口
				rechargeConfirmApi({
					token,
					channel_id,
					payment_id,
					pay_image,
					money
				}).then(res => {
					// 处理接口返回的结果
					console.log(res);
					uni.showToast({
						title: res.data.msg,
						icon: 'none',
						duration: 2000
					});
				}).catch(error => {
					// 处理接口调用失败的情况
					console.error(error);
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {


		.mine {
			padding-top: 60rpx;
			font-size: 30px;
			font-weight: 500;
			font-family: PM;
			line-height: 92rpx;
		}

		.nav {
			height: 100rpx;
			line-height: 100rpx;
			background-color: rgba(237, 237, 237, .46);
			border-radius: 40rpx;
			overflow: hidden;
			position: relative;
			font-size: 32rpx;
			margin-top: 40rpx;

			.nav_item {
				flex: 1;
				position: relative;
				z-index: 10;
				opacity: .3;
				transition: all .3s ease;
			}

			.nav_bg {
				position: absolute;
				top: 6rpx;
				background-image: url("../../../static/img/page_bg.png");
				background-size: cover;
				z-index: 1;
				border-radius: 40rpx;
				width: calc(50% - 6rpx);
				height: calc(100% - 12rpx);
				z-index: 9;
				transition: all .3s ease;
			}

			.nav_left {
				left: 6rpx;
			}

			.nav_right {
				left: 50%;
			}

			.active_nav {
				color: #0065ff;
				opacity: 1;
			}
		}

		.crypto {
			font-family: PM;
			margin-top: 50rpx;
			opacity: .8;
		}

		.input_box {
			width: 540rpx;
			margin-top: 20rpx;
			background-color: hsla(0, 0%, 92.9%, .46);
			border-radius: 20rpx;
			font-size: 30rpx;
			padding: 0 40rpx;
			height: 90rpx;
			line-height: 90rpx;
			border: 4rpx solid #3d3d3d;
			font-weight: 600;
			font-family: PM;
		}

		.qr {
			.qr_code {
				background-color: hsla(0, 0%, 92.9%, .46);
				border-radius: 20rpx;
				font-size: 30rpx;
				border: 4rpx solid #3d3d3d;
				width: 540rpx;
				height: 540rpx;
				overflow: hidden;
				margin-top: 20rpx;
			}

			.copy {
				margin-top: 10rpx;
				font-family: PM;
				font-size: 32rpx;
				word-break: break-all;
				width: 540rpx;
			}
		}

		.fixed {
			.btn {
				width: 100%;
				height: 100rpx;
				line-height: 100rpx;
				color: #fff;
				font-size: 32rpx;
				padding: 0 40rpx;
				border-radius: 20rpx;
				background-image: url("../../../static/img/btn_bg.png");
				background-size: cover;
				background-repeat: no-repeat;
				overflow: hidden;
			}

			.done {
				background-color: #0065ff;
				margin-left: 40rpx;
				margin-top: 80rpx;
				border-radius: 20rpx 0px 0px 20rpx;
			}
		}

		.card_tips {
			height: 52vh;
			font-size: 32rpx;
			padding: 0 50rpx;
			text-align: center;
		}

		.skip {
			margin-top: 80rpx;
		}

		.form_item {
			.crypto {
				margin-top: 40rpx;
			}

			.item_box {
				margin-top: 20rpx;
				background-color: hsla(0, 0%, 92.9%, .46);
				border-radius: 20rpx;
				font-size: 30rpx;
				border: 4rpx solid #3d3d3d;
				width: 540rpx;
			}

			.input_box {
				height: 90rpx;
				line-height: 90rpx;
			}

			.image_box {
				width: 540rpx;
				height: 540rpx;
				overflow: hidden;
			}
		}

		.agree {
			margin-top: 20rpx;
			opacity: 0.5;
			line-height: 32rpx;
			align-items: flex-start;

			.icon_box {
				width: 30rpx;
				height: 30rpx;
				border: 4rpx solid #303133;
				margin-right: 10rpx;
				border-radius: 4rpx;
			}

			.is_agree {
				border: 4rpx solid #0065ff;
				background: #0065ff;
			}
		}
	}

	.mask {
		width: 100%;
		height: auto;
		background: #fff;
		border-radius: 40rpx 40rpx 0 0;
		padding: 40rpx;

		.back {
			width: 72rpx;
			height: 72rpx;
			background-color: hsla(0, 0%, 92.9%, .46);
			border-radius: 20rpx;
		}

		.title {
			font-size: 50rpx;
			margin: 40rpx 0;
		}

		.list {
			.item {
				margin: 20rpx 0;
				align-items: flex-start;

				.logo {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					overflow: hidden;
					box-shadow: 0px 3px 8px 0 rgba(0, 0, 0, .16);
					margin-right: 30rpx;
					flex-shrink: 0;
				}

				.i_list {
					flex: 1;
					overflow: hidden;
					box-shadow: 0px 3px 8px 0 rgba(0, 0, 0, .16);
					padding: 20rpx 30rpx;
					border-radius: 20rpx;

					.i_item {
						padding: 10rpx 0;
						font-weight: 600;

						.font_title {
							font-size: 32rpx;
							opacity: 0.6;
							font-weight: 500;
						}
					}
				}
			}
		}
	}
</style>